<template>
  <div class="container">
    <div class="page page-1">
      <div class="page-1_left_container page-item_container">
        <p class="title">phChat，拉近你我的距离</p>
        <p class="content">
          支持发送语音短信、视频、图片和文字<br>
          可以群聊，仅耗少量流量，适合大部分智能手机<br>
          一键进入拍照模式，分享精彩时刻
        </p>
        <div class="button_container">
          <img src="~/assets/images/iOS@2x.png" alt="">
          iOS下载
        </div>
        <div class="button_container android">
          <img src="~/assets/images/Android@2x.png" alt="">
          Android下载
        </div>
      </div>
      <div class="page-1_right_container page-item_container">
        <img src="~/assets/images/手机展示@2x.png" alt="">
      </div>
    </div>
    <div class="page page-2">
      <Ititle title="关于phChat" content="支持发送语音短信、视频、图片和文字,可以群聊，仅耗少量流量，适合大部分智能手机一键进入拍照模式，分享精彩时刻"></Ititle>
      <div class="page-wrap">
        <img class="phone" src="~assets/images/手机展示1@2x.png" alt="">
        <div class="page-2_right_container">
          <div class="content-wrap">
            <p class="title">分享精彩快乐，尽在PhChat</p>
            <p class="content">一键进入拍照模式，不必为打开相机而导致来不及抓拍精彩瞬间而烦恼，与好友实<br>
              时分享每个抓拍精彩瞬间，记录自己的美好生活点滴<br>
              无论何时何地，拿起手机，是时候和朋友面对面了。群聊也可视频聊天，可高达6<br>
              人的实时视频聊天，提供全球的高质量通话，拉近好友之间的距离<br>
              与好友分享地理位置，无需通过语言告诉对方。发送你当前的地理位置，方便朋友找到你<br>
              </p>
              <div class="button_container">
                <img src="~/assets/images/iOS@2x.png" alt="">
                iOS下载
              </div>
              <div class="button_container android">
                <img src="~/assets/images/Android1@2x.png" alt="">
                Android下载
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page page-3">
      <Ititle title="一键进入拍摄模式" content="一键进入拍照模式，不必为打开相机而导致来不及抓拍精彩瞬间而烦恼，与好友实时分享每个抓拍精彩瞬间，记录自己的美好生活点滴。"></Ititle>
      <div class="page-wrap">
        <div class="page-3_right_container">
          <div class="content-wrap">
            <p class="title">快速抓拍，时刻分享</p>
            <p class="content">轻点相机，快速进入相机模式，抓拍精彩瞬间。
              抓拍过后，快速分享，与好友共享此刻精彩。
              还能同步到Facebook哦。
            </p>
              <div class="button_container">
                查看详情
              </div>
          </div>
        </div>
        <img class="phone" src="~assets/images/phone@2x.png" alt="">
      </div>
    </div>
    <div class="page page-4">
      <Ititle title="群聊视频" content="群聊也可视频聊天，可高达6人的实时视频聊天，提供全球的高质量通话拉近好友之间的距离。"></Ititle>
      <div class="page-wrap">
        <img class="phone" src="~assets/images/视频展示@2x.png" alt="">
        <div class="page-4_right_container">
          <div class="content-wrap">
            <p class="title">何时何地都能面对面</p>
            <p class="content">
              打开群聊，点击”+“，选择视频聊天，选择群员，<br>
              即可开启多人视频。<br>
              无论在哪，无论什么时间，打开群聊视频，<br>
              便可第一时间与好友面对面。
            </p>
              <div class="button_container">
                查看详情
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page page-5">
      <Ititle class="title-component" title="位置共享" content="与好友分享地理位置，无需通过语言告诉对方。发送你当前的地理位置，方便朋友找到你。"></Ititle>
      <div class="page-wrap">
        <img class="phone black" src="~assets/images/black@2x.png" alt="">
        <div class="content-wrap">
          <p class="content">
            打开好友聊天，点击“+”，选择位置，获取当前位置，点击发送即可发送给好友，实时与好友共享位置。
            好友点击收到的位置信息，选择导航，即可规划与你最接近的路线，让好友以最快时间到达你身边，永不迷路。
          </p>
          <div class="button-container">
            查看详情
          </div>
        </div>
        <img class="phone white" src="~assets/images/white@2x.png" alt="">
      </div>
    </div>
    <div class="page page-6">
      <Ititle class="title-component" title="界面展示"></Ititle>
      <img src="~assets/images/1@2x.png" alt="">
    </div>
    <div class="page page-7">
      <ul>
        <li>首页</li>
        <li>关于PhChat</li>
        <li>咨询动态</li>
        <li>客服中心</li>
        <li>隐私保护指引</li>
      </ul>
      <p>
        ROLLINGSTONE NETWORK CO.LTD.<br>
        ADD:17k Oceanaire Bldg , Sunrise Drive , CBP D Macapagal , Pasay , Manila PHILIPPINES<br>
        TEL:+63 (02) 6620000 FAX:+63 (02) 6627777<br>
      </p>
    </div>
  </div>
</template>

<script>
import Ititle from '~/components/title.vue'

export default {
  asyncData() {
    return {
      date:new Date()
    }
  },
  components: {
    Ititle
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100vh;
  background: #ffffff;
  .page-1{
    width: 100vw;
    height: 100vh;
    background: url('~assets/images/background.png');
    background-size: 100% 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    .page-1_left_container {
      position: relative;
      .title{
        width:21.88rem;
        height:1.82rem;
        margin: 0 auto;
        font-size:1.82rem;
        font-family:Aleo-Regular;
        font-weight:400;
        color:rgba(252,169,55,1);
        line-height:3.13rem;
        margin-top: 15rem;
        margin-left: 20rem;
      }
      .content{
        margin: 3rem auto;
        width:21.88rem;
        height:5.21rem;
        font-size:1.04rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(248,240,223,1);
        line-height:2.08rem;
        margin-left: 20rem;
      }
      .button_container{
        width:15.63rem;
        height:3.65rem;
        background:rgba(252,169,55,1);
        border-radius:2rem;
        margin-left: 20rem;
        display: flex;
        align-items: center;
        font-size:1.56rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(248,240,223,1);
        line-height:2.08rem;
        img{
          width:1.72rem;
          height:2.08rem;
          display: inline;
          line-height: 3.65rem;
          margin-right: 1.04rem;
          margin-left: 3.65rem;
        }
        &.android{
          margin-top: 1.67rem;
          img{
            margin-left: 1.98rem;
          }
        }
      }
    }
    .page-1_right_container{
      img{
        width: 32.19rem;
        margin-top: 9.69rem;
      }
    }
  }
  .page-2{
    height: 100vh;
    .page-wrap{
      display: grid;
      grid-template-columns: 50% 50%;
      .phone{
        width: 34.58rem;
        height: 31.93rem;
        margin-left: 12.71rem;
        margin-top: 5.26rem;
      }
      .page-2_right_container{
        .content-wrap{
          width: 28.18rem;
          float: right;
          margin-right: 21.88rem;
          text-align: right;
          .title{
            height:1.41rem;
            font-size:1.46rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(55,55,55,1);
            line-height:1.41rem;
            margin-top: 8rem;
          }
          .content{
            margin-top: 2.5rem;
            height:8.54rem;
            font-size:0.78rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(125,125,125,1);
            line-height:1.56rem;
            margin-bottom: 3.13rem;
          }
          .button_container{
            float: right;
            width:15.63rem;
            height:3.65rem;
            background:rgba(252,169,55,1);
            border-radius:2rem;
            display: flex;
            align-items: center;
            font-size:1.56rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(248,240,223,1);
            line-height:2.08rem;
            img{
              width:1.72rem;
              height:2.08rem;
              display: inline;
              line-height: 3.65rem;
              margin-right: 1.04rem;
              margin-left: 3.65rem;
            }
            &.android{
              margin-top: 1.67rem;
              background: #ffffff;
              border: 1px solid rgba(252,169,55,1);
              color: rgba(252,169,55,1);
              img{
                margin-left: 1.98rem;
              }
            }
          }
        }
      }
    }
  }
  .page-3{
    height: 100vh;
    background:rgba(255,250,244,1);
    .page-wrap{
      display: grid;
      grid-template-columns: 50% 50%;
      .phone{
        width: 34.58rem;
        height: 31.93rem;
        margin-right: 12.71rem;
        margin-top: 5.26rem;
      }
      .page-3_right_container{
        .content-wrap{
          width: 28.18rem;
          float: left;
          margin-left: 21.88rem;
          text-align: left;
          .title{
            height:1.41rem;
            font-size:1.46rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(55,55,55,1);
            line-height:1.41rem;
            margin-top: 8rem;
          }
          .content{
            margin-top: 2.5rem;
            height:3.91rem;
            font-size:0.78rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(125,125,125,1);
            line-height:1.56rem;
            margin-bottom: 3.13rem;
          }
          .button_container{
            float: left;
            width:10.94rem;
            height:3.65rem;
            border-radius:2rem;
            align-items: center;
            font-size:1.56rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:#FCA937;
            border: 1px solid #FCA937;
            text-align: center;
            line-height:3.65rem;
            margin-top: 5rem;
          }
        }
      }
    }
  }
  .page-4{
    height: 100vh;
    .page-wrap{
      display: grid;
      grid-template-columns: 50% 50%;
      .phone{
        width: 34.58rem;
        height: 31.93rem;
        margin-left: 17.71rem;
        margin-top: 5.26rem;
      }
      .page-4_right_container{
        .content-wrap{
          width: 28.18rem;
          float: right;
          margin-right: 21.88rem;
          text-align: right;
          .title{
            height:1.41rem;
            font-size:1.46rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(55,55,55,1);
            line-height:1.41rem;
            margin-top: 8rem;
          }
          .content{
            margin-top: 2.5rem;
            height:3.91rem;
            font-size:0.78rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(125,125,125,1);
            line-height:1.56rem;
            margin-bottom: 3.13rem;
          }
          .button_container{
            float: right;
            width:10.94rem;
            height:3.65rem;
            border-radius:2rem;
            align-items: center;
            font-size:1.56rem;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:#FCA937;
            border: 1px solid #FCA937;
            text-align: center;
            line-height:3.65rem;
            margin-top: 5rem;
          }
        }
      }
    }
  }
  .page-5{
    height: 120vh;
    width: 100%;
    background: url('~assets/images/形状3@2x.png');
    background-size: 100% 100%;
    .title-component{
      padding-top: 11.32rem;
    }
    .page-wrap{
      display: grid;
      grid-template-columns: auto 30.26rem auto;
      height: 17.08rem;
      margin-top: 0;
      img.phone{
        width: 17.08rem;
        height: 30.21rem;
        align-self: top;
        &.black{
          justify-self: end;
        }
      }
      .content-wrap{
        justify-self: center;
        .content{
          margin-top: 6.2rem;
          text-align: center;
          width:20.31rem;
          height:5.52rem;
          font-size:0.78rem;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(125,125,125,1);
          line-height:1.56rem;
        }
        .button-container{
          margin: 0 auto;
          width:10.94rem;
          height:3.65rem;
          border:1px solid rgba(255,255,255,1);
          border-radius:2rem;
          height:3.65rem;
          font-size:1.56rem;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(255,255,255,1);
          line-height:3.65rem;
          text-align: center;
          margin-top: 5.31rem;
        }
      }
    }
  }
  .page-6{
    height: 100vh;
    img{
      width: 60.05rem;
      display: block;
      margin: 2rem auto;
    }
  }
  .page-7{
    width:100rem;
    height:8.91rem;
    background:rgba(255,209,153,1);
    display: grid;
    justify-content: center;
    ul{
      margin: 0 auto;
      margin-top: 3.07rem;
      li {
        list-style: none;
        float: left;
        padding: 0 10px;
        font-size:0.83rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(125,125,125,1);
        & + li{
          border-left: 1px solid #7D7D7D;
        }
      }
    }
    p{
      font-size:0.73rem;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(125,125,125,1);
      text-align: center;
    }
  }
}
</style>
<style>
*::-webkit-scrollbar {
  display: none;
}
</style>